<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>公告管理</title>
    <script src="../jQuery/jquery-1.11.2.js"></script>
    <script src="../layer/layer/layer.js"></script>
    <!--导入layui-->
    <link rel="stylesheet" href="../layui/layui/css/layui.css">
    <script src="../layui/layui/layui.js"></script>
    <style type="text/css">
        .layui-table-cell{
            height:36px;
            line-height: 36px;
        }
        *{
            font-size: 20px;
            font-family: 微软雅黑;
        }
    </style>

    <script type="text/javascript">
        $(function () {
            //查询所有班级
            $.ajax({
                async:false,
                url:"../ClassServlet?method=findClass",
                type:'GET',
                data:"",
                success:function (data) {
                    data=$.parseJSON(data);
                    var leng=data.json1;
                    var str="<option value=''>"+"--请选择班级名称--"+"</option>";
                    $.each(leng,function (index,item) {
                        str+="<option value="+item.className+">"+item.className+"</option>";
                    });
                    $("#ex1").append(str);
                    $("#ex2").append(str);
                }
            });
        });
    </script>
</head>
<body>

<!--添加和修改弹出对话框-->
<div style="display: none;" id="MaxDiv">
    <div style="margin-top: 40px;margin-left: 10px;">
        <form class="layui-form" id="mainForm" method="post" lay-filter="myForm">
            <div class="layui-form-item" hidden="true">
                <label class="layui-form-label">公告编号</label>
                <div class="layui-input-inline">
                    <input type="number" name="noticeId"  style="width: 300px;"  placeholder="请输入公告编号" value="0"   autocomplete="off" class="layui-input" />
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">发布者姓名</label>
                <div class="layui-input-inline">
                    <input type="text" name="teacherName" style="width: 300px;"  placeholder="请输入发布者姓名"   lay-verify="required"  autocomplete="off" class="layui-input" />
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">公告内容</label>
                <div class="layui-input-inline" >
                    <textarea rows="4" cols="42" name="noticeBody"  value="textarea" placeholder="请输入公告内容："></textarea>
                </div>
            </div>
            <div class="layui-form-item" >
                <label class="layui-form-label">发送到</label>
                <div class="layui-input-inline" style="width: 300px">
                    <select  name="className" id="ex2">
<%--                        <option value="1">t281</option>--%>
<%--                        <option value="2">t282</option>--%>
<%--                        <option value="3">t283</option>--%>
<%--                        <option value="4">t285</option>--%>
<%--                        <option value="5">t286</option>--%>
<%--                        <option value="6">t287</option>--%>
                    </select>
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">显示时间</label>
                <div class="layui-input-inline" style="width: 300px">
                    <input type="date" name="noticeBeginTime" id="noticeBeginTime" lay-verify="date" placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input">
                </div>
            </div>

            <br/>
            <br/>
            <div class="layui-inline">
                <label class="layui-form-label">结束时间</label>
                <div class="layui-input-inline" style="width: 300px">
                    <input type="date" name="noticeOutTime"id="noticeOutTime"    lay-verify="date" placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input">
                </div>
            </div>
            <br/>
            <br/>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn   " style="margin-left: 60px"  id="okk"  lay-submit lay-filter="okkFilter" >确认</button>
                    <button type="reset" class="layui-btn layui-btn-warm">重置</button>
                </div>
            </div>
        </form>
    </div>
</div>
<%--<script type="text/javascript">
    //打开对话框
    closeDiv=layer.open({
        type:1,
        title:"标题",
        offset: 'auto',
        area:["500px","400px"],
        content:$("#MaxDiv").html()
    });
</script>--%>

<%--工具条--%>
<div id="btn" hidden="true" lay-filter="test">
    <button class="layui-btn layui-btn-sm layui-btn-radius layui-btn-danger layui-icon layui-icon-delete"  lay-event="delete">删除</button>
    <button class="layui-btn layui-btn-sm layui-btn-radius layui-btn-warm layui-icon layui-icon-edit"  lay-event="update">编辑</button>
    <button class="layui-btn layui-btn-sm layui-btn-radius layui-icon layui-icon-add-circle "  lay-event="okkk">发布</button>
</div>

<%--工具头--%>
<blockquote class="layui-elem-quote news_search">
    <div id="demoTable" hidden="true">
        <form class="layui-form">
            <div class="layui-inline layui-form-item">
                <input type="text" style="width: 220px;height: 35px;margin-top: 4px" placeholder="请输入发布员姓名" class="layui-input" name="teacherName" id="teacherId" autocomplete="off">
<%--                <select  name="teacherId">--%>
<%--                    <option value="">--请选择发布员--</option>--%>
<%--                    <option value="2">余平</option>--%>
<%--                    <option value="4">刘婷</option>--%>
<%--                    <option value="6">蒋霞</option>--%>
<%--                    <option value="8">胡贤惠</option>--%>
<%--                    <option value="10">刘东辉</option>--%>
<%--                    <option value="12">谢肖燕</option>--%>
<%--                </select>--%>
            </div>
            <div class="layui-inline layui-form-item">
                <select  name="className" id="ex1">
<%--                    <option value="">--请选择班级--</option>--%>
<%--                    <option value="1">t281</option>--%>
<%--                    <option value="2">t282</option>--%>
<%--                    <option value="3">t283</option>--%>
<%--                    <option value="4">t285</option>--%>
<%--                    <option value="5">t286</option>--%>
<%--                    <option value="6">t287</option>--%>
                </select>
            </div>
            <div class="layui-inline layui-form-item">
                <button class="layui-btn layui-btn-radius layui-btn-normal layui-icon layui-icon-search" lay-submit lay-filter="search">搜索</button>
            </div>
            <div style=" float: right;margin-right: 100px" class=" layui-form-item layui-inline" >
                <a href="javascript:;" style="font-size: 20px;font-family: 微软雅黑;" class="layui-btn layui-btn-radius layui-icon layui-icon-add-circle"  lay-event="add">新建公告</a>
                <a href="javascript:;" style="font-size: 20px;font-family: 微软雅黑;" class="layui-btn layui-btn-radius layui-btn-danger layui-icon layui-icon-delete" lay-event="allDelete">批量删除</a>
            </div>
        </form>
    </div>

    <%--展示表格--%>
    <table class="layui-hide" lay-filter="test" id="demo"></table>
</blockquote>

<script>
    layui.use(['table','layer','form'], function(){
        var table = layui.table;
        var layer=layui.layer;
        var form=layui.form;



        table.render({
            elem: '#demo'
            ,method:'post'
            ,url:'../NoticeServlet?method=findAll' //数据接口
            ,offset: 'auto'
            ,toolbar:"#demoTable"
            ,cellMinWidth: 240
            ,height:665
            ,cols: [[
                {type:'checkbox'}
                ,{field: 'noticeId', title: '公告编号'}
                , {
                    field: 'teacherName', title: '公告发布者'//,templet:function(d){
                    //注意格式,此处d为对象，d.字段名来获得该字段值
                    //     if(d.teacherId == 2){
                    //         return '<span  >余平</span>';
                    //     }else if(d.teacherId == 4){
                    //         return '<span  >刘婷</span>';
                    //     }else if(d.teacherId == 6){
                    //         return '<span  >蒋霞</span>';
                    //     }
                    //     else if(d.teacherId == 8){
                    //         return '<span >胡贤惠</span>';
                    //     }
                    //     else if(d.teacherId ==10){
                    //         return '<span  >刘东辉</span>';
                    //     }
                    // }}
                }
                ,{field: 'className', title: '发布到'
                    // ,templet:function(d){
                    //     //注意格式,此处d为对象，d.字段名来获得该字段值
                    //     if(d.classId == 1){
                    //         return '<span>t281</span>';
                    //     }else if(d.classId == 2){
                    //         return '<span  >t282</span>';
                    //     }else if(d.classId == 3){
                    //         return '<span >t283</span>';
                    //     } else if(d.classId == 4){
                    //         return '<span >t285</span>';
                    //     } else if(d.classId == 5){
                    //         return '<span  >t286</span>';
                    //     }else if(d.classId == 6){
                    //         return '<span  >t287</span>';
                    //     }
                    // }
                    }
                ,{field: 'noticeBody', title: '公告内容',}
                ,{field: 'noticeBeginTime', title: '显示公告时间'}
                ,{field: 'noticeOutTime', title: '结束公告时间'}
                ,{fixed: 'right',title: '操作',toolbar:'#btn'}
            ]]

            ,page: true
        });



        //为删除和编辑添加事件
        /*
        * 删除：首先捕捉在功具条点击事件(添加对应的内置监听事件)，在函数中接收事件源，事件源.event获得的值即为
        * 点击标签的lay-event属性的值，取出值进行判断后，询问用户是否确认删除，确认后，通过ajax发送数据，接收
        * 响应后弹出提示并关闭询问框，最后刷新表格
        * */
        table.on("tool(test)",function(e){
            //判断点击的是删除事件
            //取得点击行的数据
            var data=e.data;
            if (e.event=="delete"){
                layer.confirm("确认要删除吗？",function(index){
                    //形式上删除这一行
                    e.del();
                    $.ajax({
                        type:"post",
                        url:"../NoticeServlet?method=delete",//该路径仅供测试
                        data:"noticeId="+data.noticeId,
                        dataType:"text",
                        success:function(data){
                            if (data=="ok"){
                                layer.msg("删除成功",{icon:1,time:2000});
                                //添加成功，返回了一行数据id,servlet接收后删除，删除成功后返回ok
                            }else{
                                layer.msg("删除失败",{icon:2,time:2000});
                            }
                        }
                    });
                    //点击后关闭对话框
                    layer.close(index);
                    //刷新表格
                    //table.reload("demo");
                });
            }else if (e.event=="okkk") {
                layer.confirm("确定要发布吗？",function () {
                    layer.msg('发布成功');
                });

            }else if (e.event=="update"){//判断点击的为编辑

                //让主键不能修改
                $("#stopText").attr("readonly","readonly");
                //将确认按钮改为修改
                $("#okk").text("修改");
                //打开对话框
                closeDiv=layer.open({
                    type:1,
                    title:"标题",
                    offset: 'auto',
                    area:["650px","650px"],
                    content:$("#MaxDiv").html()
                });
                //将数据添加到表单当中
                form.val("myForm",{
                    noticeId:data.noticeId,
                    teacherName:data.teacherName,
                    noticeBody:data.noticeBody,
                    className:data.className,
                    noticeBeginTime:data.noticeBeginTime,
                    noticeOutTime:data.noticeOutTime
                });

            }
            return false;
        });


        //判断点击的是搜索
        form.on("submit(search)",function(data){
            //获取数据
            var dataTable=data.field;
            if (dataTable.teacherName!="" || dataTable.classId!="" ){
                //重载表格，刷新时发送数据
                table.reload("demo",{
                    page:{//刷新后从第几页开始显示
                        curr: 1
                    },
                    where:{
                        teacherName:dataTable.teacherName,
                        className:dataTable.className,
                    }
                });
            }else{
                layer.msg("请输入内容")
            }
            return false;
        });


        //判断点击的是添加还是批量删除
        table.on("toolbar(test)",function (data) {
            //让主键可以输入
            $("#stopText").removeAttr("readonly");
            //判断点击的是添加
            if (data.event=="add"){
                //将确认按钮改为增加
                $("#okk").text("增加");
                //调出窗口
                closeDiv=layer.open({
                    type:1,
                    title:"增加内容",
                    offset: 'auto',
                    area:["650px","650px"],
                    content:$("#MaxDiv").html()
                });
                form.render();
            }else if (data.event=="allDelete"){//点击的是批量删除
                //拿到复选框选中行数据
                var data1=table.checkStatus(data.config.id).data;
                if (data1.length>0){
                    layer.confirm('确定要删除吗?', {icon: 3, title:'提示'}, function(index){
                        var noticeIdStr="";
                        $.each(data1,function(index,item){
                            noticeIdStr+=item.noticeId+",";
                        });
                        noticeIdStr=noticeIdStr.substring(0,noticeIdStr.length-1);
                        //通过ajax发送数据
                        $.ajax({
                            type:"post",
                            url:"../NoticeServlet?method=batchDel",
                            data:"noticeIdStr="+noticeIdStr,
                            dataType:"text",
                            success:function(data){
                                if (data=="ok"){
                                    layer.msg("删除成功");
                                    table.reload("demo");
                                }else{
                                    layer.msg("删除失败")
                                }
                            }
                        });
                        layer.close(index);
                    });
                }else{
                    layer.msg("请选择数据再进行删除！");
                }
            }
        });



        //判断点击的是修改还是增加
        form.on("submit(okkFilter)",function(data){
            //拿到jQuery元素
            var elem=$("#okk").text();
            //var elem=$(data.elem);//因为拿到的是dom对象所以要转换成jqeury对象才可以调用text()
            //alert(elem.text());
            //判断点击的按钮是修改还是增加
            if (elem=="修改"){
                //将数据发送到服务器端
                $.ajax({
                    type:"POST",
                    url:"../NoticeServlet?method=update&teacherName="+data.field.teacherName+"&className="+data.field.className,
                    data:"json="+JSON.stringify(data.field),
                    dataType:"text",
                    success:function(data){
                        //判断修改是否成功
                        if (data=="ok"){
                            layer.msg("修改成功");
                                table.reload("demo");
                        }else{
                            layer.msg("修改失败");
                        }
                    }
                });
                //不管添加成功还是失败，都需要清空对话框，防止为下次添加时造成影响
                $("#mainForm")[0].reset();
                //关闭对话框
                layer.close(closeDiv);
                return false;//不进行跳转，也就是不再表格显示时再次请求XXX.json
            }else if (elem=="增加"){//判断点击的为增加
                //将数据发送到服务器端
                $.ajax({
                    type:"POST",
                    url:"../NoticeServlet?method=add&className="+data.field.className+"&teacherName="+data.field.teacherName,
                    data:"json="+JSON.stringify(data.field),
                    dataType:"text",
                    success:function(data){
                        if (data=="ok"){
                            layer.msg("添加成功");
                            table.reload("demo");
                        }else{
                            layer.msg("添加失败");
                        }
                    }
                });
                //清空表单框
                $("#mainForm")[0].reset();
                //关闭窗口
                layer.close(closeDiv);
                //不跳转
                return false;
            }
        });


    });
</script>
</div>
</body>
</html>